<template>
	<view class="page bg-white">
		<view class="main">
			<view @click="showProvincePopup = true">
				<u-text text="省" size="32rpx" color="#333333" bold>
				</u-text>
				<view class="form-item">
					<u-text :text="province || '请选择省份'" size="32rpx" color="#333333">
					</u-text>
					<u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
				</view>
			</view>
			<view @click="showCityPopup = true">
				<u-text text="市" size="32rpx" color="#333333" bold>
				</u-text>
				<view class="form-item">
					<u-text :text="city || '请选择城市'" size="32rpx" color="#333333">
					</u-text>
					<u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
				</view>
			</view>
			<view @click="showAreaPopup = true">
				<u-text text="区/县" size="32rpx" color="#333333" bold>
				</u-text>
				<view class="form-item">
					<u-text :text="area || '请选择区/县'" size="32rpx" color="#333333">
					</u-text>
					<u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
				</view>
			</view>

			<u-picker :closeOnClickOverlay="true" :show="showProvincePopup" :columns="provinceList"
				@confirm="handleCityConfirm" @close="showProvincePopup = false" @cancel="showProvincePopup = false"></u-picker>
			<u-picker :closeOnClickOverlay="true" :show="showCityPopup" :columns="cityList" @confirm="handleCityConfirm"
				@close="showCityPopup = false" @cancel="showCityPopup = false"></u-picker>
			<u-picker :closeOnClickOverlay="true" :show="showAreaPopup" :columns="areaList" @confirm="handleAreaConfirm"
				@close="showAreaPopup = false" @cancel="showAreaPopup = false"></u-picker>
		</view>
		<view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
			<u-button text="保存" shape="circle" size="large" :color="themePrimary" @click="handleSave"></u-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeTertiary } = useTheme();
const showProvincePopup = ref(false)
const showCityPopup = ref(false)
const showAreaPopup = ref(false)

const province = ref('')
const city = ref('')
const area = ref('')
const provinceList = ref([['山西省', '河北省', '山东省']])
const cityList = ref([['太原市', '大同市', '阳泉市']])
const areaList = ref([['小店区', '迎泽区', '杏花岭区']])

const handleProvinceConfirm = (e) => {
	province.value = e.value[0]
	showProvincePopup.value = false
}

const handleCityConfirm = (e) => {
	city.value = e.value[0]
	showCityPopup.value = false
}

const handleAreaConfirm = (e) => {
	area.value = e.value[0]
	showAreaPopup.value = false
}
</script>

<style scoped lang="scss">
.form-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f5f5f5;
	padding: 20rpx;
	border-radius: 10rpx;
	margin: 20rpx 0;
}
</style>
